import React, { useEffect } from "react";
import axios from "../../../request/axios";
import wan from "../../../assets/icon/白天晴2.png";
import bai from "../../../assets/icon/白天晴2.png";

function HomeLeft() {
  type Data = {
    data: {
      city: string;
      cityid: string;
      cityname: string;
      date: string;
      humidity: string;
      tem: string;
      tem1: string;
      tem2: string;
      tem_day: string;
      tem_night: string;
      win: string[];
      win_speed: string;
      air: string;
      air_level: string;
      wea: string;
    }[];
  };
  // useEffect(() => {
  //   axios({
  //     url: "http://gfeljm.tianqiapi.com/api?unescape=1&version=v91&appid=96999166&appsecret=1yEFytiv&ext=&cityid=",
  //     method: "get",
  //   }).then((res) => {
  //     console.log(res);
  //     setData(res.data);
  //   });
  // }, []);
  const [data, setData] = React.useState<Data>({
    data: [],
  });

  return ( 
    <div>
      <div className="home-left-top">
        <div className="home-left-top1">
          <span className="home-left-top-title">
            环境监测
            <div className="title-img"></div>
          </span>
        </div>
        <div className="home-left-top2">
          <div className="home-left-top2-item">
            <div className="home-left-top2-item1">
              {/* <span style={{ fontSize: "46px" }}>{data.data[0]?.tem}°C</span> */}
            </div>
            <div className="home-left-top2-item2">
              <span style={{ marginBottom: "10px", display: "inline-block" }}>
                {/* {data.data[0]?.wea} */}
                <span className="home-left-top2-item2-span">
                  {/* {data.data[0]?.air}
                  {data.data[0]?.air_level} */}
                </span>
              </span>
              <p>
                {/* {data.data[0]?.tem2} ~ {data.data[0]?.tem1}°C */}
              </p>
            </div>
            <div className="home-left-top2-item3">
              <div className="yellow"></div>
              <span style={{ color: "#fdb201" }}>高温黄色预警</span>
            </div>
          </div>
          <div className="home-left-top3">
            <div className="home-left-top3-item1">
              <div className="home-left-top3-item1-icon1"></div>
              <span>体感</span>
              <span style={{ marginLeft: "210px" }}>31°C</span>
            </div>
            <div className="home-left-top3-item2">
              <div className="home-left-top3-item1-icon2"></div>
              <span>风力</span>
              <span style={{ marginLeft: "120px" }}>
                {/* {data.data[0]?.win[0]}
                {data.data[0]?.win_speed} */}
              </span>
            </div>
            <div className="home-left-top3-item3">
              <div className="home-left-top3-item1-icon3"></div>
              <span>湿度</span>
              <span style={{ marginLeft: "210px" }}>
                {/* {data.data[0]?.humidity} */}
              </span>
            </div>
          </div>
          <div className="home-left-top4">
            <div className="home-left-top4-item1">
              <span className="home-left-top4-item1-title">
                {/* {data.data[0]?.tem1} ~ {data.data[0]?.tem2}℃ */}
              </span>
              <img width={24} height={24} src={wan} alt="" />
              <p className="home-left-top4-item1-desc">
                <span>今天</span>
                <span className="home-left-top4-item1-desc-span">
                  {/* {data.data[0]?.air}
                  {data.data[0]?.air_level} */}
                </span>
                {/* <span>{data.data[0]?.wea}</span> */}
              </p>
            </div>
            <div className="home-left-top4-item2">
              <span className="home-left-top4-item1-title">
                {/* {data.data[1]?.tem1} ~ {data.data[1]?.tem2}℃ */}
              </span>
              <img width={24} height={24} src={bai} alt="" />
              <p className="home-left-top4-item1-desc">
                <span>明天</span>
                <span className="home-left-top4-item1-desc-span">
                  {/* {data.data[1]?.air}
                  {data.data[1]?.air_level} */}
                </span>
                {/* <span>{data.data[1]?.wea}</span> */}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

export default HomeLeft;
